<script setup lang="ts">
import { ETable, ETableColumn } from 'exploria-ui';
import libDescriptionJson from './lib_description.json';
import packageJson from '../../../../../package.json';

const getLibList = (libType: 'dependencies' | 'devDependencies') =>
    Object.entries(packageJson[libType]).map((entry) => {
        return {
            name: entry[0],
            version: entry[1],
            description: (
                libDescriptionJson[libType] as Record<string, string>
            )[entry[0]],
        };
    });
</script>

<template>
    <div class="lib-page">
        <div class="lib-description">
            运行依赖
            <ETable :data="getLibList('dependencies')">
                <ETableColumn label="依赖" prop="name" draggable />
                <ETableColumn label="版本" prop="version" />
                <ETableColumn label="描述" prop="description" />
            </ETable>
        </div>
        <div class="lib-description">
            开发依赖
            <ETable :data="getLibList('devDependencies')">
                <ETableColumn label="依赖" prop="name" />
                <ETableColumn label="版本" prop="version" />
                <ETableColumn label="描述" prop="description" />
            </ETable>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@use '@/style/global' as global;

.lib-page {
    .lib-description {
        .e-table {
            :deep(.e-table-head) {
                background-color: bisque;
            }
        }
    }
}
</style>
